<template>
  <view class="user-card" @click.stop="userLogin">
    <image
      class="user-avatar"
      :src="info.icon || ossImg('personal/moren_avatar.png')"
    />
    <view class="flex-1">
      <view style="font-size: 16px; line-height: 23px">{{
        info.nickname || "未授权"
      }}</view>
      <view style="font-size: 12px; line-height: 23px">{{
        (info.memberScore &&
          `${info.memberScore.levelName}VIP.${info.memberScore.level}`) ||
        "点击注册"
      }}</view>
    </view>
    <view class="flex items-center flex-col">
      <view class="text-base leading-none mb-5px"
        >【积分】
        {{ (info.memberScore && info.memberScore.surplusScore) || 0 }}</view
      >

      <view class="w-76.5px h-19px integral" @click.stop="handleToExchange"
        >积分兑换</view
      >
    </view>
  </view>
</template>

<script setup>
import { ossImg } from "@/utils/utils";
import { defineProps, onMounted, ref } from "vue";
defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});

const userLogin = () => {
  if (
    getApp().globalData.user.nickname === null ||
    getApp().globalData.user.nickname === "" ||
    getApp().globalData.user.nickname === undefined
  ) {
    getApp().getWechatUserProfile({
      path: "/pages/home/home",
    });
  }
};

const handleToExchange = () => {
  const path = "/personalPages/biscuit/mall";

  getApp().emdlz("track", "event", "homepage_new", "click", "Points_Mall", "");

  if (
    getApp().globalData.user.phone === null ||
    getApp().globalData.user.phone === ""
  ) {
    console.log(0);
    uni.setStorageSync(
      "REDIRECT_URI",
      JSON.stringify({ path, redirect: true })
    );
    uni.navigateTo({ url: "/pages/vip/register" });
    return;
  }
  if (
    getApp().globalData.user.nickname === null ||
    getApp().globalData.user.nickname === "" ||
    getApp().globalData.user.nickname === undefined
  ) {
    console.log(1);
    // cachePath.value = { path, redirect };
    return getApp().getWechatUserProfile({ path, redirect: true });
  }
  uni.navigateTo({ url: path });
};
</script>

<style lang="less" scoped>
.user-card {
  width: 330px;
  height: 81px;
  background-size: 100%;
  background-position: top left;
  background-repeat: no-repeat;
  margin: 0 auto;
  border-radius: 25rpx;
  background: rgba(240, 248, 254, 0.75);
  color: #2c6daf;
  display: flex;
  align-items: center;
  padding: 0 22px;
  box-sizing: border-box;
  font-size: 16px;
  .user-avatar {
    width: 56px;
    height: 56px;
    background-color: white;
    border-radius: 56px;
    margin-right: 6px;
  }
}

.integral {
  font-size: 12px;
  line-height: 19px;
  color: #fff;
  text-align: center;
  background: linear-gradient(0deg, #084cc3, #1187ec);
  box-shadow: 0px 2px 1px 0px rgba(255, 255, 255, 0.49);
  border-radius: 19px;
  margin-top: 6px;
}
</style>
